<template>
  <div class="payment-box">
    <p class="payment-title">额度介绍</p>
    <div class="payment-list">
      <div class="payment-item" v-for="item in payList" :key="item.id">
        <div class="item-content">
          <div class="text">
            <p class="token">{{ item.tokensTitle }}</p>
            <p class="unit">价格</p>
            <div class="unit-price">
              <span class="price">{{ item.price }}</span>
              <span class="currency">元</span>
            </div>
          </div>
          <div class="species">
            <img src="@img/recharge/species.png" alt="" srcset="" />
          </div>
        </div>
        <div class="item-btn">
          <button class="buy-button" @click="toBuy(item)">立即购买</button>
        </div>
      </div>
    </div>
    <div class="payment-dialog" v-show="paymentShow">
      <div class="payment-content">
        <div class="exit" @click="hidePayment">
          <img src="@img/login/exit.png" alt="" />
        </div>
        <div class="select">
          <p>请选择支付方式</p>
        </div>
        <div class="payment-method">
          <div
            class="alipay method-item"
            :class="{ active: activePaymentMethod == 'alipay' }"
            @click="changePayType('alipay')"
          >
            <img src="@img/recharge/Alipay.png" alt="" />
            <p>支付宝支付</p>
          </div>
          <div
            class="wechat method-item"
            :class="{ active: activePaymentMethod == 'wechat' }"
            @click="changePayType('wechat')"
          >
            <img src="@img/recharge/WeChat.png" alt="" />
            <p>微信支付</p>
          </div>
        </div>
        <div class="payment-container">
          <div>
            <img :src="payCode" alt="二维码支付" v-if="payCode" />
          </div>
          <div class="info">
            <p class="countdown">充值倒计时:{{ formatTime }}</p>
            <p class="price" v-if="selectedPackage">
              ￥{{ selectedPackage.price }}
              <del class="price-del">￥{{ selectedPackage.price }}</del>
            </p>
            <p class="protocol">
              请使用“{{
                activePaymentMethod == "alipay" ? "支付宝" : "微信"
              }}”支付，充值即代表同意《<span>鹿线AI用户协议</span>》
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onBeforeMount, computed } from "vue";
// api
import {
  getpackage,
  type IPackageItem,
  getAlipayCode,
  getWxCodeApi,
  orderStatus,
  type IOrderItem,
} from "@api/account";
// qrcode
import QRCode from "qrcode";
const payList = ref<IPackageItem[]>([]);
// 生命周期
onBeforeMount(() => {
  getpackageList();
});
// 查询充值套餐
const getpackageList = async () => {
  const res = await getpackage();
  if (res.code != 0) return;
  payList.value = res.data;
};
// 当前支付方式
const activePaymentMethod = ref("alipay");
// 当前选择的产品
const selectedPackage = reactive<Partial<IPackageItem>>({});
// 控制支付弹窗
const paymentShow = ref(false);
// 打开弹窗
const toBuy = (item: IPackageItem) => {
  console.log(item);
  Object.assign(selectedPackage, item);
  // 默认支付宝支付
  getAliCode();
};
// 关闭弹窗
const hidePayment = () => {
  paymentShow.value = false;
  closeTimer();
};
// 订单号
const orderNo = ref();
// 获取支付套餐-支付宝二维码
const getAliCode = async () => {
  const res = await getAlipayCode(selectedPackage.id as string);
  if (res.code != 0) return;
  console.log(res);
  orderNo.value = res.data.orderNo;
  getQRcode(res.data.codeUrl);
};

// 获取支付套餐-微信二维码
const getWxCode = async () => {
  const res = await getWxCodeApi(selectedPackage.id as string);
  if (res.code != 0) return;
  console.log(res);
  orderNo.value = res.data.orderNo;
  getQRcode(res.data.codeUrl);
};
// 支付切换
const changePayType = (method: string) => {
  activePaymentMethod.value = method;
  closeTimer();
  if (method == "wechat") {
    getWxCode();
  } else {
    getAliCode();
  }
};
// 获取二维码
const payCode = ref("");
const getQRcode = (url: string) => {
  if (url) {
    QRCode.toDataURL(url, (err: any, dataURL: any) => {
      if (err) return;
      payCode.value = dataURL;
      paymentShow.value = true;
      startTimer();
      newTimerFun();
    });
  }
};
// 倒计时
const state = reactive({
  timer: 60,
  active: false,
});
const orderCloseTimer = ref();
const startTimer = () => {
  state.timer = 60;
  state.active = true;
  orderCloseTimer.value = setInterval(() => {
    if (state.timer > 0) {
      state.timer--;
    } else {
      state.active = false;
      closeTimer();
    }
  }, 1000);
};
// 关闭定时器
const closeTimer = () => {
  clearInterval(orderCloseTimer.value);
  clearInterval(paymentTimer.value);
};
// 查询支付订单状态
const paymentTimer = ref();
const newTimerFun = () => {
  paymentTimer.value = setInterval(orderPayStatus, 1000);
};
const orderPayStatus = async () => {
  const res = await orderStatus(orderNo.value);
  console.log(res);
};
// 格式化倒计时时间
const formatTime = computed(() => {
  const min = Math.floor(state.timer / 60);
  const sec = state.timer % 60;
  return `${String(min).padStart(2, "0")}分 ${String(sec).padStart(2, "0")}秒`;
});
</script>

<style lang="scss" scoped>
.payment-box {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
  .payment-title {
    font-weight: 700;
    font-size: 13px;
    color: #232323;
    margin: 0;
  }
  .payment-list {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    margin-top: 20px;
    .payment-item {
      width: 223px;
      height: 223px;
      background: #ffffff;
      box-shadow: 0px 4 4px 1px rgba(145, 145, 145, 0.1216);
      border-radius: 7px 7px 7px 7px;
      border: 1px solid #c90000;
      margin-right: 25px;
      margin-bottom: 25px;
      box-sizing: border-box;
      padding: 13px 28px 23px;
      display: flex;
      flex-direction: column;
      .item-content {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #eeeeee;
        padding-bottom: 15px;
        box-sizing: border-box;
        .text {
          margin-top: 22px;
          .token {
            font-weight: 700;
            font-size: 15px;
            color: #333333;
            margin: 0;
          }
          .unit {
            margin-top: 9px;
            font-size: 11px;
            color: #999999;
          }
          .unit-price {
            font-size: 12px;
            color: #dc985e;
            .price {
              font-size: 18px;
            }
            .currency {
              margin-left: 2px;
            }
          }
        }
        .species {
          width: 50px;
          height: 50px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .item-btn {
        flex: 1;
        display: flex;
        align-items: center;
        //   按钮
        .buy-button {
          width: 100%;
          height: 30px;
          background: linear-gradient(180deg, #fcc893 0%, #f6aa68 100%);
          border-radius: 3px 3px 3px 3px;
          border: none;
          font-size: 11px;
          color: #ffffff;
        }
      }
    }
  }
  //   弹窗
  .payment-dialog {
    width: 100%;
    height: 100%;
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 0;
    bottom: 0;
    .payment-content {
      width: 589px;
      height: 415px;
      background: #ffffff;
      border-radius: 27px 27px 27px 27px;
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) translateZ(0);
      box-sizing: border-box;
      padding: 31px 42px 33px 49px;
      .exit {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        cursor: pointer;
        img {
          width: 17px;
          height: 17px;
        }
      }
      .select {
        p {
          font-size: 21px;
          color: #232323;
        }
      }
      .payment-method {
        display: flex;
        .method-item {
          width: 203px;
          height: 69px;
          border-radius: 9px 9px 9px 9px;
          border: 1px solid #e0e0e0;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          img {
            width: 24px;
            height: 24px;
          }
          p {
            font-size: 19px;
            color: #232323;
            margin-left: 13px;
          }
          //   border: 1px solid #1296db;
        }
        .active {
          border: 1px solid #1296db;
        }
        .wechat {
          margin-left: 53px;
        }
      }
      .payment-container {
        display: flex;
        height: 164px;
        margin-top: 30px;

        .info {
          padding: 10px 0 10px 2px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          .countdown {
            font-size: 12px;
            color: #232323;
            margin: 0;
          }
          .price {
            font-weight: 700;
            font-size: 39px;
            color: #232323;
            margin: 0;
            .price-del {
              font-size: 19px;
              color: #bfbfbf;
              font-weight: 400;
            }
          }
          .protocol {
            color: #232323;
            font-size: 12px;
            margin: 0;
            span {
              color: #c90000;
              cursor: pointer;
              font-weight: 700;
            }
          }
        }
      }
    }
  }
}
</style>
